<template>
  <div v-loading="loading" class="dialog">
    <div class="title">基本信息</div>
    <div class="msg">
      <!-- <el-radio-group style="margin: 20px 0 0 30px;" v-model="xzfs" @change="xzfsChange">
        <el-radio  label="1">新增</el-radio>
        <el-radio  label="2">从上云系统中选择</el-radio>
      </el-radio-group> -->
      <!-- <div style="margin-bottom: 10px;">
        <label style="margin-right: 20px;">服务商: </label>
        <el-radio v-for="(item,index) in configure.cloud_service_provider" :key="index" v-model="form.cloudSupplier" :label="item.dictValue">
          {{item.dictLabel}}</el-radio>
      </div> -->
      <el-form :model="cloudUp" ref="cloudUp" style="width: 100% !important;" :rules="xzfs==1?rules:rules2"
        label-width="120px">
        <div class="wrap" style="margin-top: 20px;">
          <div class="item">
            <el-form-item label="系统名称:" prop="projectname">
             {{detail.projectname}}
            </el-form-item>
            <!-- <el-form-item v-else label="上云系统:" prop="cloudUpId">
              <el-select clearable filterable style="width: 200px" v-model="cloudUp.cloudUpId" @change="cloudUpIdChange"
                placeholder="请先选择上云系统">
                <el-option v-for="item in xtList" :key="item.id" :label="item.projectname" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item> -->
          </div>
          <div class="item">
            <el-form-item label="云服务商:" prop="supplierName">
              <span>{{detail.supplierName}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="上线时间:" prop="onlinetime">
              <el-date-picker v-if="xzfs==1" v-model="cloudUp.onlinetime" type="date" style="width: 200px" clearable
                value-format="yyyy-MM-dd" placeholder="请选择上线时间">
              </el-date-picker>
              <span v-else>{{detail.onlinetime}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="上云区域:" prop="onlinetime">
              <el-select v-if="xzfs==1" v-model="cloudSystem.cloudUpArea" placeholder="请选择" size="mini" style="width: 200px;">
                  <el-option v-for="item in cloud_up_areaList" :key="item.dictValue" :label="item.dictLabel"
                      :value="item.dictValue">
                  </el-option>
              </el-select>
              <span v-else>{{translatecloudUpArea(detail.cloudUpArea)}}</span>
            </el-form-item>
          </div>
        </div>
        <div class="wrap">
          <div class="item">
            <el-form-item label="业务部门:" prop="officeId">
              <el-cascader v-if="xzfs==1" :props="{value:'id',checkStrictly: true}" :show-all-levels="false"
                @change="deptChange" style="width: 200px" placeholder="请选择，可搜索" :options="dept" clearable filterable>
              </el-cascader>
              <span v-else>{{detail.officeName}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="业主方联系人:" prop="contacts">
              <el-select v-if="xzfs==1" clearable style="width: 200px" v-model="cloudUp.contacts"
                :placeholder="cloudUp.officeId?'请选择业主方联系人':'请先选择业务部门'">
                <el-option v-for="item in users" :key="item.userName" :label="item.nickName" :value="item.userName">
                </el-option>
              </el-select>
              <span v-else>{{detail.contactsNickName}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="联系电话:" prop="contactsinfo">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请输入联系电话"
                v-model="cloudUp.contactsinfo" clearable>
              </el-input>
              <span v-else>{{detail.contactsinfo}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="邮箱:" prop="email">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请输入邮箱" v-model="cloudUp.email"
                clearable>
              </el-input>
              <span v-else>{{detail.email}}</span>
            </el-form-item>
          </div>
        </div>
        <div class="wrap">
          <div class="item">
            <el-form-item label="承建单位:" prop="constunit">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请选择承建单位"
                v-model="cloudUp.constunit" clearable>
              </el-input>
              <span v-else>{{detail.constunit}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="承建方联系人:" prop="constcts">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请输入承建方联系人"
                v-model="cloudUp.constcts" clearable>
              </el-input>
              <span v-else>{{detail.constcts}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="联系电话:" prop="constctsinfo">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请输入联系电话"
                v-model="cloudUp.constctsinfo" clearable>
              </el-input>
              <span v-else>{{detail.constctsinfo}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="邮箱:" prop="constemail">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请输入邮箱" v-model="cloudUp.constemail"
                clearable>
              </el-input>
              <span v-else>{{detail.constemail}}</span>
            </el-form-item>
          </div>
        </div>
        <div class="item" style="width: calc(100% - 20px);">
          <el-form-item label-width="200px" label="系统建设（运维）资金来源:" prop="fundFromRadio">
            <el-radio-group v-if="xzfs==1" v-model="cloudUp.fundFromRadio">
              <el-radio label="1">区（县）</el-radio>
              <el-radio label="2">市级</el-radio>
              <el-radio label="3">
                <el-input style="width: 200px" size="mini" placeholder="请输入其他资金来源" v-model="cloudUp.fundFrom" clearable>
                </el-input>
              </el-radio>
            </el-radio-group>
            <span v-else>{{detail.fundFrom}}</span>
          </el-form-item>
        </div>
        <div class="item" style="width: calc(100% - 20px);">
          <el-form-item style="width: 100%;" label-width="200px" label="自行落实部门上云经费:" prop="fundBySelf">
            <el-radio-group v-if="xzfs==1" v-model="cloudUp.fundBySelf">
              <el-radio label="true">是</el-radio>
              <el-radio label="false">否</el-radio>
            </el-radio-group>
            <span v-else>{{detail.fundBySelf == true ? '是' : '否'}}</span>
          </el-form-item>
        </div>
        <div class="item" style="width: calc(100% - 20px);">
          <el-form-item style="width: 100%;" label="项目简介:" prop="introduction">
            <el-input v-if="xzfs==1" type="textarea" style="width: 100%" :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入项目简介" v-model="cloudUp.introduction">
            </el-input>
            <span v-else>{{detail.introduction}}</span>
          </el-form-item>
        </div>
        <div class="item" style="width: calc(100% - 20px);">
          <el-form-item style="width: 100%;" label="申请理由:" prop="remarks">
            <el-input v-if="xzfs==1" type="textarea" style="width: 100%" :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入申请理由" v-model="cloudUp.remarks">
            </el-input>
            <span v-else>{{detail.remarks}}</span>
          </el-form-item>
        </div>
        <div class="item" style="width:100%">
          <el-form-item style="width: 100%;" label="文件:" prop="remarks">
            <el-table  :data="detail.files" style="width: 100%">
              <el-table-column prop="fileName" label="文件名称">
              </el-table-column>
              <el-table-column prop="fileExt" label="文件类型">
              </el-table-column>
              <el-table-column label="操作" width="200" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-view"
                      v-show="scope.row.fileExt == 'jpeg' ||
                                  scope.row.fileExt == 'jpg' ||
                                  scope.row.fileExt == 'png' ||
                                  scope.row.fileExt == 'pdf' ||
                                  scope.row.fileExt == 'gif'"
                      @click="previewFile(scope.row)"
                      >预览
                  </el-button>
                  <el-button size="mini" type="text" icon="el-icon-download" @click="download(scope.row)"
                  >下载
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </div>
      </el-form>
      <el-dialog :visible.sync="dialogVisible">
        <div style="max-height: 90vh;overflow-y: scroll;">
          <img width="100%" :src="dialogImageUrl" alt="">
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import {
    listUser2
  } from "@/api/system/user";
  import {
    cloudUpList,
    AllcloudUpList,
    cloudUpDetail,
    DelectUploadFile
  } from "@/api/cloud/cloud";
  import {
    getDicts
  } from "@/api/system/dict/data";
  export default {
    name: "addA",
    components: {},
    props: {
      dept: {
        type: Array,
        default: []
      },
      detail: {
        type: Object,
        default: {}
      }
    },
    data() {
      var validateFundFrom = (rule, value, callback) => {
        if (value === '3') {
          if (this.cloudUp.fundFrom) {
            callback();
          } else {
            callback(new Error('请输入其他资金来源'));
          }
        } else if (value === '') {
          callback(new Error('请选择系统建设（运维）资金来源'));
        } else {
          callback();
        }
      };
      return {
        loading:false,
        //新增方式
        xzfs: '2',
        //上云系统列表
        xtList: [],
        //用户列表
        users: [],
        configure: {
          cloud_service_provider: ''
        },
        form: {
          cloudSupplier: ''
        },
        cloudUp: {
          cloudUpId: '', //上云系统id
          projectname: '', //系统名称
          officeId: '', //业务部门Id
          officeName: '', //业务部门名称
          onlinetime: '', //上线时间

          contacts: '', //联系人id
          contactsNickName: '', //联系人名称
          contactsinfo: '', //联系电话
          email: '', //联系邮箱

          constunit: '', //承建单位
          constcts: '', //承建联系人姓名
          constctsinfo: '', //承建联系方式
          constemail: '', //承建邮箱



          fundFromRadio: '2', //系统建设（运维）资金来源选择
          fundFrom: '', //系统建设（运维）资金来源  最终值
          fundBySelf: 'false', //自行落实部门上云经费

          introduction: '', //项目简介
          constunit: '', //承建单位
          remarks: '', //申请理由
          files: [], //附件列表
        },
        // isIndeterminate: true,
        checkAll: false,
        rules: {
          projectname: [{
            required: true,
            message: '请输入系统名称',
            trigger: 'blur'
          }, ],
          officeId: [{
            required: true,
            message: '请选择业务部门',
            trigger: 'change'
          }, ],
          onlinetime: [{
            required: true,
            message: '请选择上线时间',
            trigger: 'change'
          }, ],
          contacts: [{
            required: true,
            message: '请选择业主方联系人',
            trigger: 'change'
          }, ],
          contactsinfo: [{
            required: true,
            message: '请输入业主方联系电话',
            trigger: 'blur'
          }, ],
          email: [{
            required: true,
            message: '请输入业主方联系邮箱',
            trigger: 'blur'
          }, ],
          constunit: [{
            required: true,
            message: '请输入承建单位',
            trigger: 'blur'
          }, ],
          constcts: [{
            required: true,
            message: '请输入承建方联系人',
            trigger: 'blur'
          }, ],
          constctsinfo: [{
            required: true,
            message: '请输入承建方联系人电话',
            trigger: 'blur'
          }, ],
          constemail: [{
            required: true,
            message: '请输入承建方联系人邮箱',
            trigger: 'blur'
          }, ],
          fundFromRadio: [{
            required: true,
            validator: validateFundFrom,
            trigger: 'change'
          }, ],
          fundBySelf: [{
            required: true,
            message: '请选择是否自行落实部门上云经费',
            trigger: 'change'
          }, ],
          introduction: [{
            required: true,
            message: '请输入项目简介',
            trigger: 'blur'
          }, ],
          remarks: [{
            required: true,
            message: '请输入申请理由',
            trigger: 'blur'
          }, ],
        },
        rules2: {
          cloudUpId: [{
            required: true,
            message: '请选择上云系统',
            trigger: 'change'
          }, ],
        },
        input2: 0,
        dialogImageUrl: '',
        dialogVisible: false,
        base_url: process.env.VUE_APP_BASE_API,
        cloud_up_areaList:[],
      };
    },
    created() {
      getDicts("cloud_up_area").then((response) => {
          this.cloud_up_areaList = response.data;
      });
    },
    methods: {

      translatecloudUpArea(data){
          var Name = ''
          this.cloud_up_areaList.forEach(item=>{
              if(item.dictValue == data){
                  Name = item.dictLabel
              }
          })
          return Name
      },
      previewFile(item) {
        this.dialogImageUrl = this.base_url + item.filePath;
        this.dialogVisible = true;
      },
      // 文件删除
      DeleteFile(id) {
        this.$confirm("是否删除该文件?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            DelectUploadFile(id).then(res => {
              if (res.code == 200) {
                this.detail.files = this.detail.files.filter(item => {
                  if (item.id == id) {

                  } else {
                    return item
                  }
                })
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
              }

            })
          })
      },
      download(item){
        let downloadFile = this.base_url + '/system/downloadFile?fileName=' + item.fileName + '&filePath=' + item.filePath
        window.location.href = downloadFile
        return
      },
      //文件预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //文件列表变化
      handleChange(res, fileList) {
        this.cloudUp.files = fileList
      },
      //下一步
      next() {
        this.$refs.cloudUp.validate((valid) => {
          if (valid) {
            let cloudUp = this.cloudUp
            if (this.xzfs == 1) {
              cloudUp.cloudUpId = ''
              this.users.some(item => {
                if (item.userName == cloudUp.contacts) {
                  cloudUp.contactsNickName = item.nickName
                  return true
                }
              })
            } else {
              let cloudUpId = cloudUp.cloudUpId
              cloudUp = this.detail
              cloudUp.cloudUpId = cloudUpId
            }
            this.$emit('next', cloudUp)
          } else {
            return false;
          }
        });
      },
      //新增方式变化
      xzfsChange(e) {
        this.$refs.cloudUp.clearValidate()
        if (e == 2 && !this.xtList.length) {
          AllcloudUpList({
            isXc:'false'
          }).then(response => {
            this.xtList = response.rows;
          }).then(() => {});
        }
      },

      //业务部门变化
      deptChange(e) {
        this.users = []
        this.cloudUp.contacts = ''
        this.cloudUp.officeId = ''
        if (e.length) {
          this.cloudUp.officeId = e[e.length - 1]
          this.getName(this.dept, this.cloudUp.officeId)
          listUser2({
            deptId: this.cloudUp.officeId,
            pageNum: 1,
            pageSize: 10000000
          }).then(response => {
            this.users = response.rows
          })
        }
      },
      getName(data, id) {
        data.forEach(item => {
          if (item.id == id) {
            this.cloudUp.officeName = item.label
          } else if (item.children && item.children.length) {
            this.getName(item.children, id)
          }
        })
      },
    }
  };
</script>
<style scoped lang="less">
  .dialog {
    margin-bottom: 30px;
    font-size: 12px;
    .title {
      text-align: left;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;
      padding-left: 4px;
      border-left: 4px solid #38b3aa;
    }
    .el-form-item {
      margin: 10px 0;
    }
    .msg {
      padding: 0 20px 20px 20px;
      background: #faf9ff;
      display: flex;
      flex-wrap: wrap;
      border-radius: 10px;

      .wrap {
        width: 100%;
        display: flex;
        // flex-wrap: wrap;
        border-bottom: 1px solid rgba(192,196,204,0.5);
      }

      .item {
        width: 25%;
        display: flex;
        // margin-left: 20px;
        // width: calc(25% - 20px);
        // min-width: 340px;
        // display: flex;
        // border-bottom: 1px solid rgba(192,196,204,0.5);
      }
    }
  }
</style>
